<template>
  <div class="base-container">
    <!--年份过滤-->
    <t-form ref="form" :data="queryParams" label-width="80" colon>
      <t-row style="border-bottom: 1px solid #e5e6eb; margin-bottom: 10px">
        <t-col :span="queryParams.viewType?4:9" class="query-form-inline">
          <t-form-item label="填表年份" name="year">
            <t-select @change="getData" v-model="queryParams.years" :options="years" placeholder="请选择填表年份" />
          </t-form-item>
        </t-col>
        <t-col v-if="queryParams.viewType" :span="5">
          <t-form-item label="单位名称" name="deptName">
            <t-input clearable v-model="queryParams.deptName" placeholder="根据单位名称进行筛选"></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="2" :offset="1">
          <t-radio-group @change="getData" variant="primary-filled" v-model="queryParams.viewType">
            <t-radio-button :value="0">按表单查看</t-radio-button>
            <t-radio-button :value="1">按单位查看</t-radio-button>
          </t-radio-group>
        </t-col>
      </t-row>
    </t-form>
    <t-table
      rowKey="id" :data="tableData" :columns="tableColumn"
      :loading="tableLoading" :pagination="pagination"
      bordered hover
    >
      <template #allCount="{ row }">
        <t-link theme="primary" @click="showAllCount(row)">{{row.allCount}}</t-link>
      </template>
      <template #fillCount="{ row }">
        <t-link  theme="primary" @click="toFilledPage(row)">{{row.fillCount}}</t-link>
        <!-- <t-link v-else theme="default" disabled>0</t-link> -->
      </template>
      <template #notFillCount="{ row }">
        <t-link theme="primary" @click="showNotFillCount(row)">{{row.notFillCount}}</t-link>
      </template>
      <template #op="{ row }">
        <t-button size="small" @click="newPage(row)" variant="text" class="t-button-link">
          <t-icon name="edit-1" slot="icon"/>
          配置
        </t-button>
      </template>
    </t-table>
    <t-dialog
      :header="dialog.header"
      :visible.sync="dialog.open"
      @confirm="onDialogConfirm"
      :footer="null"
      :closeOnOverlayClick="false"
    >
      <div class="dialog_tree_wrapper">
        <t-tree :data="dialog.data" :keys="{label:'deptName'}" hover />
      </div>
    </t-dialog>
  </div>
</template>

<script>
import { curYear, genYears } from '../genYears.js'

export default {
  name: 'ViewTableList',
  data() {
    return {
      years: genYears(),
      queryParams: {
        years: curYear,
        viewType: 0, // 1根据单位，2根据表单
        deptName: '',
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10
      },
      tableData: [],
      tableLoading: false,
      dialog: {
        open: false,
        header: '所有待填单位数量',
        data: [],
        loading: false
      }
    }
  },
  computed: {
    tableColumn() {
      const { viewType } = this.queryParams
      if (viewType) {
        // 根据单位
        return []
      }
      return [
        { colKey: 'sort', title: '序号', align: 'center', width: 80 },
        { colKey: 'name', title: '表单名称', align: 'center' },
        { colKey: 'op', title: '操作', align: 'center', width: 150  },
        // { colKey: 'allCount', title: '所有待填单位数量', align: 'center', width: 180 },
        // { colKey: 'fillCount', title: '已填写单位数量', align: 'center', width: 180 },
        // { colKey: 'notFillCount', title: '未填写单位数量', align: 'center', width: 180 },
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.tableLoading = true
      if (this.queryParams.viewType) {
        this.getDataByUnit()
      } else {
        this.getDataByTable()
      }
    },
    newPage(row){
      this.$router.push({path:`/kjtjdc/other/reset/${row.id}`,query:{title:`表单重置`}});
    },
    async getDataByUnit() {
      this.$message.warning('该功能正在开发中...')
      this.tableLoading = false
    },
    async getDataByTable() {
      const params = {
        years: this.queryParams.years,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
      }
      try {
        const { code, msg, rows, total } = await this.$api.kjtjdc.manage.getStatisticsByTable(params)
        if (code === 200) {
          this.tableData = rows
          this.pagination.total = total
        } else {
          throw msg
        }
      } catch (e) {
        this.$message.error(e)
        this.tableData = []
        this.pagination.total = 0
      } finally {
        this.tableLoading = false
      }
    },
    async showAllCount(row) {
      this.dialog.header = '所有待填单位数量'
      this.dialog.open = true
      this.dialog.data = []
      this.dialog.loading = true
      const { data } = await this.$api.kjtjdc.manage.getDeptTreeByTableFill({
        years: this.queryParams.years,
        tableId: row.id,
      })
      this.dialog.data = data
      this.dialog.loading = false
    },
    async showNotFillCount(row) {
      this.dialog.header = '未填写单位数量'
      this.dialog.open = true
      this.dialog.data = []
      this.dialog.loading = true
      const { data } = await this.$api.kjtjdc.manage.getDeptTreeByTableFill({
        years: this.queryParams.years,
        tableId: row.id,
        fill: 0
      })
      this.dialog.data = data
      this.dialog.loading = false
    },
    onDialogConfirm() {
      this.dialog.open = false
    },
    toFilledPage(row) {
      this.$router.push({ path: '/kjtjdc/other/manage/fill-table-info', query: { code: row.code } })
    }
  }
}
</script>

<style lang="less" scoped>
.dialog_tree_wrapper {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.dialog_tree_wrapper::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.dialog_tree_wrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
</style>
